<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠券列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/Coupons/CouponList.css"/>
</head>
<body>
<div class="layui-container" id="div_div_id">
    <!--优惠券列表部分-->
    <div class="layui-row" id="List_Header">
        <div>
            <span id="color_id">▉</span>
            <span id="List_Header_span">优惠券列表</span>
        </div>
        <div id="btn_id">
            <button type="button" class="layui-btn layui-btn-sm btn_class" id="refresh" onclick="refresh()">
                <i class="layui-icon layui-icon-refresh"></i> &nbsp;刷新
            </button>
            <button type="button" class="layui-btn layui-btn-sm btn_class" onclick="backOff()" id="go_id">
                <i class="layui-icon layui-icon-left"></i> 返回
            </button>
        </div>
    </div>
    <!--筛选查询-->
    <div class="layui-row" id="List_query">
        <div class="layui-col-xs7 layui-col-sm8 layui-col-md9 layui-col-lg10">
            <i class="layui-icon layui-icon-search"></i><span id="List_query_span">筛选查询</span>
        </div>
        <div  id="btn_id2">
            <button type="button" class="layui-btn layui-btn-sm btn_class" id="accurate" onclick="accurate()">
                高级检索
            </button>
            <button type="button" class="layui-btn layui-btn-sm btn_class" id="selProduct" onclick="selCoupon()">
                查看
            </button>
        </div>
    </div>
    <div  id="List_query2">
        <form class="layui-form" action="" id="layui-form">
            <div class="layui-form-item layui-row" id="layui-form-item" style="margin-left: 45px">
                <div class="layui-inline inline layui-col-xs4 layui-col-sm3 layui-col-md3 layui-col-lg3">
                    <label class="layui-form-label List_query2_label label">优惠券名称：</label>
                    <div class="layui-input-block" style="margin-left: 120px">
                        <input type="text" name="couponName" class="layui-input" placeholder="优惠券名称" id="couponName"/>
                    </div>
                </div>
                <div class="layui-inline  layui-col-xs4 layui-col-sm5 layui-col-md5 layui-col-lg5 inline1">
                    <label class="layui-form-label List_query2_label">发放方式：</label>
                    <div class="layui-input-block">
                        <select  id="mode">
                            <option value="0">请选择发放方式</option>
                            <option value="2">自动发放</option>
                            <option value="3">活动领取</option>
                            <option value="4">人工发放</option>
                            <option value="5">无限制</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline  layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4 inline2">
                    <label class="layui-form-label List_query2_label label" style="width:120px;">优惠券状态：</label>
                    <div class="layui-input-block" style="margin-left: 150px">
                        <select  id="online">
                            <option value="0">请选择优惠券状态</option>
                            <option value="2">上线</option>
                            <option value="3">不上线</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--数据列表-->
    <div class="layui-row" id="List_querys">
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md10 layui-col-lg11">
            <i class="layui-icon layui-icon-form"></i>
            <span id="List_query_spans">数据列表</span>
        </div>
        <div id="addCoupon_id">
            <button type="button" class="layui-btn layui-btn-sm btn_class" onclick="addCoupon()">
                添加优惠券
            </button>
        </div>
    </div>
    <div id="div_div_id_s">
        <table id="table_id" lay-filter="table_id"></table>
    </div>
    <input type="text" id="couponId" style="display: none"/>
    <!-- 开始时间赋值-->
    <input type="hidden" id="startDate">
    <!-- 结束时间赋值-->
    <input type="hidden" id="endDate">
</div>
<script>
    var table ;
    layui.use(['table','jquery','layer'],function () {
        var form = layui.form;
        var jquery = layui.jquery;
        table = layui.table;

        //获取优惠券数据列表
        $.ajax({
            url:'/Coupon/getTable',
            methos:'post',
            dataType:'json',
            success:function (data) {
                tab(data);
            }
        })

        //表格渲染
       function tab(data){
           table.render({
               elem:'#table_id',
               data:data.data,
               page:true,
               cols:[[
                   {type:'checkbox'},
                   {field:'couponCode',title:'编号',align:'center'},
                   {field:'couponName',title:'优惠券名称',align:'center'},
                   {field:'startDate',title:'开始时间',align:'center'},
                   {field:'endDate',title:'结束时间',align:'center'},
                   {field:'title',title:'上架/下架',align:'center',templet:function(d){
                           if (data.online == 2){
                               return '<input type="checkbox" name="switch" value="'+data.couponId+'" lay-filter="online" lay-text="上架 | 下架" lay-skin="switch" checked>'
                           } else{
                               return '<input type="checkbox" name="switch" value="'+data.couponId+'" lay-filter="online" lay-text="上架 | 下架" lay-skin="switch">'
                           }
                       }},
                   {field:'grant',title:'发放方式',align:'center',templet:function (d) {
                           if(d.grant == 2){
                                grant = "自动发放";
                           }else if(d.grant == 3){
                                grant = "活动领取";
                           }else if(d.grant == 4){
                                grant = "人工发放";
                           }else if(d.grant == 5){
                                grant = "无限制";
                           }
                           return grant;
                       }},
                   {field:'issueQuantity',title:'发放数量',align:'center'},
                   {field:'',title:'剩余数量',align:'center',templet:function (data) {
                           return data.issueQuantity - data.used;
                       }},
                   {title:'操作',align:'center',templet:function(d){
                           return "<span ><a  onclick='sel("+d.couponId+")' style='color:#1ABC9C;'>查看</a></span>"+
                               "<span style='margin-left: 20px'><a onclick='del("+d.couponId+")' style='color:#1ABC9C;'>删除</a></span>"
                       }},
               ]],
               limit:5
           })
       }
        //是否上线
        form.on('switch(online)', function (data) {
            var name = data.value;
            var id = name.substring(0, name.indexOf('-'));
            name = name.substring(name.indexOf('-') + 1, name.lastIndexOf('-'));
            if (data.elem.checked) {
                layer.open({
                    type: 0,
                    content: '您确定要上架' + name + '吗？',
                    area: ['300px', '190px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        layer.msg('上架成功', {icon: 6});
                        updateOnline(id, 2)
                    },
                    btn2: function (index, layero) {
                        layer.msg('上架取消', {icon: 5});
                        $('input[value=' + data.value + ']').siblings('.layui-unselect').removeClass('layui-form-onswitch');
                        data.elem.checked = false;
                    }
                });
            } else {
                layer.open({
                    type: 0,
                    content: '您确定要下架' + name + '吗？',
                    area: ['300px', '190px'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        layer.msg('下架成功', {icon: 5});
                        updateOnline(id, 3)
                    },
                    btn2: function (index, layero) {
                        layer.msg('下架取消', {icon: 6});
                        $('input[value=' + data.value + ']').siblings('.layui-unselect').addClass('layui-form-onswitch');
                        data.elem.checked = true;
                    }
                });
            }
        });
        function updateOnline(id, online){
            var user =JSON.parse(localStorage.getItem('user'));
            $.ajax({
                url: '/Coupon/updateUserCoupon',
                type: 'post',
                dataType: 'json',
                data: {
                    'couponId': id,
                    'online': online,
                    'updateId': user.userId,
                },
                success: function (item) {
                    if (item.data){
                        tab();
                    };
                }
            });
        };

       //筛选查询
        selCoupon = function selCoupon(){
            var couponName = $("input[name = couponName]").val();//优惠券名称
            var grant = $("#mode option:selected").val();//发放方式
            var online =$("#online option:selected").val(); //优惠券状态
            var selectData = {
                couponName : couponName,
                grant : grant,
                online : online
            }
            $.ajax({
                url:'/Coupon/queryCoupon',
                dataType:'json',
                data:selectData,
                success:function (data) {
                    tab(data);
                }
            })
        }

        //删除优惠券
        del =  function del(couponId){
            layer.open({
                type:1,
                content:"是否删除此商品?",
                area:['300px','200px'],
                btn:["确定","取消"],
                yes: function (index,layero) {
                    $.ajax({
                        url:'/Coupon/delCoupon',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            "couponId":couponId
                        },
                        success: function (item) {
                            if (item.data){
                                layer.msg('删除成功');
                                tab();
                            } else{
                                layer.msg('删除失败');
                            }
                        }
                    });
                },
                btn2: function (index,layero) {
                    layer.close(index);
                    window.location.reload()  //刷新页面
                }
            });
        }

        //查看优惠券详情
        sel = function sel(couponId) {
            $.ajax({
                url:'/Coupon/couponDetails',
                methos:'post',
                data:{"couponId":couponId},
                dataType:'json',
                success:function (data) {
                    localStorage.setItem("Coupons",JSON.stringify(data.data));
                    //弹出层
                    layer.open({
                        type:2,
                        content:"CouponDetails.html",
                        area:['700px','350px'],
                        title:'优惠券详情'
                    })
                }
            })

        }
        //添加优惠券
        addCoupon = function addCoupon() {
            location.href="addCoupon.html";
        }

        //刷新
        refresh = function refresh() {
            window.location.reload();
        }

        //返回首页
        backOff = function backOff(){
            parent.jumpSystemHome();
        }
        //高级检索
        accurate = function accurate(){
            layer.open({
                type:2,
                title: '高级检索',
                content:"/Coupons/couponList-precisesearch.html",
                area:['490px','500px'],
            })
        };
    })
</script>
</body>
</html>